// webpack生产模式配置文件
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let EslintWebpackPlugin = require('eslint-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
    // 入口（一个页面对应一个入口文件）
    // entry: './src/index.js',
    entry: {
        'index': './src/index.js',// index-5sd6.js
        'list': './src/list.js',// list-5sd6.js
        'add': './src/add.js',// add-5sd6.js
        'login': './src/login.js',// login-5sd6.js
        'register': './src/register.js',// register-5sd6.js
    },

    // 输出
    output: {
        filename: './js/[name]-[hash:4].js',// 定义根据入口打包输出的文件名称
        path: path.join(__dirname,'dist'),// 定义所有资源打包的输出目录
        clean: true,// 每次打包时先清除上次生成的dist
    },

    // 加载器
    module: {
        rules: [
            // loader的配置
            {
                test: /\.css$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                // 可以解决绝大部分样式兼容问题
                                plugins: ['postcss-preset-env']
                            }
                        }
                    }
                ]
            },
            {
                test: /\.less$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                // 可以解决绝大部分样式兼容问题
                                plugins: ['postcss-preset-env']
                            }
                        }
                    },
                    'less-loader'
                ]
            },
            {
                test: /\.(png|gif|jpe?g)$/i,
                type: 'asset',
                generator: {
                    // 设置图片输出的名称和目录
                    filename: './imgs/[hash:6][ext]'
                },
                parser: {
                    dataUrlCondition: {
                        // 当图片小于10kb时，转成base64的url地址
                        maxSize: 1024 * 10
                    }
                }
            },
            {
                test: /\.(ttf|eot|woff2?|svg)$/i,
                type: 'asset',
                generator: {
                    // 设置字体图标文件输出的名称和目录
                    filename: './font/[name][ext][query]'
                }
            },
            {
                test: /\.js$/i,
                exclude: /node_modules/,// 不编译node_modules中的js文件
                use: 'babel-loader',
            }
        ]
    },

    // 插件
    plugins: [
        // 插件的配置
        new HtmlWebpackPlugin({
            // 打包的模板文件
            template: './public/index.html',
            // 设置打包输出的文件名称和目录
            filename: './index.html',
            // 设置当前页面引入'index'入口文件输出的js脚本
            chunks: ['index'],
        }),
        new HtmlWebpackPlugin({
            // 打包的模板文件
            template: './public/goods-list.html',
            // 设置打包输出的文件名称和目录
            filename: './goods-list.html',
            // 设置当前页面引入'list'入口文件输出的js脚本
            chunks: ['list'],
        }),
        new HtmlWebpackPlugin({
            // 打包的模板文件
            template: './public/goods-add.html',
            // 设置打包输出的文件名称和目录
            filename: './goods-add.html',
            // 设置当前页面引入'add'入口文件输出的js脚本
            chunks: ['add'],
        }),
        new HtmlWebpackPlugin({
            // 打包的模板文件
            template: './public/login.html',
            // 设置打包输出的文件名称和目录
            filename: './login.html',
            // 设置当前页面引入'login'入口文件输出的js脚本
            chunks: ['login'],
        }),
        new HtmlWebpackPlugin({
            // 打包的模板文件
            template: './public/register.html',
            // 设置打包输出的文件名称和目录
            filename: './register.html',
            // 设置当前页面引入'register'入口文件输出的js脚本
            chunks: ['register'],
        }),
        new EslintWebpackPlugin({
            // 指定要检测的目录
            context: './src',
            // 排除某个目录不检测
            // exclude: path.join(__dirname,'src/js/lib'),
        }),
        new MiniCssExtractPlugin({
            // 设置提取出来的css文件名称和存储目录
            filename: './css/[name]-[hash:4].css'
        }),
        // 将提取出来的css进行压缩
        new CssMinimizerWebpackPlugin(),
    ],

    // 模式
    mode: 'production',// 生产模式 
};
